<template>
    <div class="stock-detail-view" :class="{ 'all-screen': isAllScreen }" v-if="stockDetail['名称']">
        <div class="stock-detail-box">
            <header class="stock-detail-header">
                <el-text type="danger">
                    <h1>{{ stockDetail['名称'] }}</h1>
                </el-text>
                <el-icon @click="isAllScreen = !isAllScreen" size="20px">
                    <FullScreen v-if="!isAllScreen" />
                    <CloseBold v-else />
                </el-icon>
            </header>

            <p>股票代码：{{ stockDetail['代码'] }}</p>
            <p>股票价格：{{ stockDetail['最新价'] }}</p>
        </div>
        <EChartsDemo :is-all-screen="isAllScreen" ref="echartsRef" />
    </div>
</template>
<script setup>
import EChartsDemo from '@/components/EChartsDemo.vue';
// import * as echarts from 'echarts/core';
import { useStockDetailStore } from '@/stores/stock';
import { computed, ref, watch } from 'vue';
const { getStockDetailRef } = useStockDetailStore();
const stockDetail = computed(() => getStockDetailRef());
const isAllScreen = ref(false);
const echartsRef = ref(null);
const refreshChart = () => {
    if (echartsRef.value) {
        echartsRef.value.refreshChart();
    }
};
watch(isAllScreen, () => {
    refreshChart();

})

</script>
<style scoped>
.stock-detail-view {
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
    padding: 5px 15px 0 15px;
}
.stock-detail-view .el-icon:hover{
    cursor: pointer;
}

.all-screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: aliceblue;
    width: 100vw;
    height: 100%;
    /* transition: all 0.3s ease-in-out; */
}

.stock-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>